<template>
    <div class="c-grid" style="width: 100%">
        <div v-for="(item,index) in data" :key="index" @click="click(item.label)">
            <icon :clazz="item.icon" style="width: 32px;height: 32px;"></icon>
            <p>{{item.label}}</p>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {}
        },
        props: {
            data: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        methods: {
            click(label) {
                if (app.config.setting.platform !== 'wechat' && !app.util.sessionStorage('token')) {
                    this.$router.push({path: '/login'});
                    return;
                }
                let n = '';
                let d = '';

                switch (label) {
                    case '快速缴费':
                        n = 'waterPayment02';
                        break;
                    case '账户余额':
                        n = 'waterRemainder';
                        d = '用量';
                        break;
                    case '缴费记录':
                        n = 'waterReport';
                        break;
                    case '用水统计':
                        n = 'waterCharge';
                        break;
                    case '绑定户号':
                        n = 'accountBinding';
                        break;
                    case '业务记录':
                        n = 'serviceRecord';
                        break;
                    case '我的消息':
                        n = 'serviceTidings';
                        break;
                    case '公告通知':
                        n = 'serviceNotice';
                        break;
                    case '常见问题':
                        n = 'accountQuestion';
                        break;
                }

                this.$router.push({name: n, params: {id: d}})
            }
        }
    }
</script>
<style>
    .c-grid div {
        width: 33%;
        border-bottom: solid 1px gainsboro;
        border-right: solid 1px gainsboro;
        float: left;
        padding-top: 15px;
    }

    .c-grid div:nth-child(3n+0) {
        border-right: 0;
    }

    .c-grid img {
        margin-top: 10px;
    }

    .c-grid p {
        margin-top: 0;
    }
</style>
